import { View } from '@tarojs/components';
import Icon from 'components/Icon'
import getSystemInfo from 'utils/getSystemInfo';
import s from './index.module.scss'
import Taro from '@tarojs/taro';
import { useEffect, useState } from 'react';

interface NavigationBarProps {
  title?: string,
  style?: any,
  onBack?: () => void,
}

function NavigationBar(props: NavigationBarProps) {
  const {title = '请设置页面标题', style = {}, onBack} = props
  const {navBarHeight = 0, statusBarHeight = 0} = getSystemInfo()
  const [len, setLen] = useState(0)

  const __style = {
    height: navBarHeight + statusBarHeight,
    ...style,
    paddingTop: statusBarHeight
  }

  useEffect(() => {
    setLen(Taro.getCurrentPages().length)
  }, [])

  const __clickHandler = () => {
    if (onBack) {
      return onBack()
    }
    if (len > 1) {
      Taro.navigateBack()
    }
  }

  const isShowBackIcon = len > 1 || onBack

  return (
    <View className={s.container} style={__style}>
      <View id={s.icon_wrapper} onClick={__clickHandler}>
        {isShowBackIcon && <Icon className={s.arrow} name='chevron-down' size={32} />}
      </View>
      <View id={s.header} style={{height: navBarHeight}}>  
        {title}
      </View>
      <View id={s.right}></View>
    </View>
  )
}

export default NavigationBar;
